<template>
  <div>
    <!-- <DynamicTabs ref="dynamicTabsRef"/>
    <Menus ref="menusRef"/> -->
    <DynamicForm ref="dynamicFormRef" :rulesForm="state.rulesForm" :rules="state.rules"/>
    <el-button @click="clickTableData">获取数据</el-button>
     <DynamicTable ref="dynamicTableRef" @click="backGo" :data="data" :columns="columns"/>
  </div>
</template>

<script setup lang="ts">
import DynamicTable from '@/components/layout/table/dynamic-table.vue'
import DynamicForm from '@/components/layout/form/dynamic-form.vue'
import Menus from '@/components/layout/menus/dynamic-menus.vue'
import DynamicTabs from '@/components/layout/tabs/dynamic-tabs.vue'
import {onMounted, reactive, ref} from "vue";
import {Column} from "element-plus";
import Storage from "@/utils/storage";
import {ACCESS_TOKEN_KEY} from "@/utils/enums/cache-enum";
import {CHECKBOX, CUSTOM, FORMAT, FORMAT_DATETIME, NUMBER, SELECT, TEXT} from "@/utils/enums/type-enums";
import {TableColumns} from "@/components/layout/table/table-columns";

const dynamicTableRef = ref (DynamicTable)
const dynamicFormRef = ref (DynamicForm)
const menusRef = ref (Menus)
const dynamicTabsRef = ref (DynamicTabs)

onMounted (() => {
  console.log (dynamicTableRef)
  console.log (dynamicFormRef)
})

const backGo = (data) => {
  console.log (data)
}

let id = 0
const dataGenerator = () => ({
  id: `random-id-${++id}`,
  name: 'Tom',
  date: '2020-10-1',
})

const clickTableData = () => {
  console.log ('dynamicFormRef', dynamicFormRef.value.getData ())
  console.log ('dynamicTableRef', dynamicTableRef.value.getData ())
}

const data = ref (Array.from ({length: 15}).map (dataGenerator))

const state = reactive ({
  rulesForm: [{
    label: null, card: [
      {
        label: '所用字符',
        name: 'usedCharacters',
        type: CHECKBOX,
        span: 8,
        usedCharacters: [1, 2], // 默认值
        options: [
          {value: 0, label: 'A-Z'},
          {value: 1, label: 'a-z'},
          {value: 2, label: '0-9'},
          {value: 3, label: '特殊字符'}]
      },
      {line: true},
      {
        label: '密码长度',
        type: SELECT,
        name: 'passwordLength',
        span: 6,
        passwordLength: 16, // 默认值
        options: [{value: 1, label: '1'},
          {value: 2, label: '2'},
          {value: 3, label: '3'},
          {value: 4, label: '4'},
          {value: 5, label: '5'},
          {value: 6, label: '6'},
          {value: 7, label: '7'},
          {value: 8, label: '8'},
          {value: 9, label: '9'},
          {value: 10, label: '10'},
          {value: 11, label: '11'},
          {value: 12, label: '12'},
          {value: 13, label: '13'},
          {value: 14, label: '14'},
          {value: 15, label: '15'},
          {value: 16, label: '16'},
          {value: 17, label: '17'},
          {value: 18, label: '18'},
          {value: 19, label: '19'},
          {value: 21, label: '21'},
          {value: 22, label: '22'},
          {value: 23, label: '23'},
          {value: 24, label: '24'},
          {value: 25, label: '25'},
          {value: 26, label: '26'},
          {value: 27, label: '27'},
          {value: 28, label: '28'},
          {value: 29, label: '29'},
          {value: 30, label: '30'},
          {value: 31, label: '31'},
          {value: 32, label: '32'}]
      },
      {line: true},
      {
        type: TEXT,
        style: {width: '200px', readOnly: 'readOnly', border: 'none'},
        label: '生成结果',
        span: 6,
        name: 'result',
        placeholder: '生成密码'
      },
    ]
  }],
  rules:
      {
        usedCharacters: [{required: true, message: 'Please input Activity name', trigger: 'blur'}],
        passwordLength: [{required: true, message: 'Please input Activity name', trigger: 'blur'},
          {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur'},],
        result: [{required: true, message: 'Please input Activity name', trigger: 'blur'},
          {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur'},]
      }
})

const columns: TableColumns<any>[] = [
  {
    type: NUMBER,// 类型
    label: '序号',// 表头
    name: 'date',// 字段
    width: 160,// 宽度
  },
  {
    type: FORMAT_DATETIME,
    label: 'Date',
    name: 'date',
    width: 160,
    formatter: 'YYYY-MM-DD HH:mm:ss', // 格式化指定格式
  },
  {
    type: FORMAT,
    label: '状态',
    name: 'status',
    width: 160,
    value: [{value: 0, label: '否'},{value: 1, label: '是'}], // 格式化指定格式
  },
  {
    type: CUSTOM,
    label: '操作',
    name: 'name',
    width: 150,
    align: 'center',
    buttons: [
      {method: 'edit', text: '编辑'}
    ]
  }]

</script>